<script setup lang="ts">
import { routes } from '@/router'
import { computed, provide, ref } from 'vue'
import { RouterView, RouterLink } from 'vue-router'

const data = ref({
  name: '李四',
  age: 18,
})

setTimeout(() => {
  data.value = {
    name: '张三',
    age: 20,
  }
}, 2000)

const dataCmp = computed(() => data.value)

provide('stu', dataCmp.value)
</script>

<template>
  <!-- <div>{{ routes }}</div> -->
  <div style="display: flex">
    <template v-for="(item, index) in routes" :key="index">
      <ElText style="margin-left: 10px">
        <RouterLink :to="{ path: item.path }">{{ item.cmpName }} </RouterLink>
      </ElText>
    </template>
  </div>
  <div style="width: 100%; border: 1px dashed black; margin-top: 20px">
    <RouterView />
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}
</style>
